import React, { ChangeEvent, useEffect, useState } from 'react';
import { Button, Input } from 'antd'
import { getCode, doLogin } from '@/api/user'

import FormEle from "@/components/form"

import { storage } from '@/utils'
import { useNavigate } from 'react-router-dom';

import backImage from '@/assets/img/login-bg.fc917d2c.png'
let Index: React.FC = () => {
    let [loginStatus, setLoginStatus] = useState(false);
    let [captcha, setCaptcha] = useState("");
    let [captchaCode, setCaptchaCode] = useState("");
    let [uuid, setUuid] = useState("");
    let navigate = useNavigate();
    useEffect(() => {
        getCode().then((res) => {
            setCaptcha(res.data.data?.captcha!);
            setUuid(res.data.data?.uuid!);
        });
    }, [loginStatus])

    //点击验证码
    let clickCaptch = () => {
        setLoginStatus(!loginStatus);
    }
    //受控
    let handler = (e: ChangeEvent) => {
        let { value } = (e.target as HTMLFormElement);
        setCaptchaCode(value);
    }
    //登录
    let login = () => {
        doLogin({
            captchaCode,
            password: '123456',
            username: 'fuint',
            uuid: uuid
        }).then((res) => {
            storage("Access-Token", res.data.data?.token);
            navigate("/");
        })
    }
    return (
        <div>
            <img onClick={clickCaptch} src={captcha} alt="" />
            <Input value={captchaCode} onChange={handler}></Input>
            <Button type="primary" onClick={login}>登录</Button>
            <FormEle></FormEle>
        </div>
    );
}

export default Index;